import Log  from "../../common/utils/log.js"
const lg = new Log('ygchart页面');
export default {
    data: {
        // 左边距
        paddingLeft: 24,
        // 右边距
        paddingRight: 24,
        // 顶边距
        paddingTop: 40,
        // 底边距
        paddingBottom: 30,

        // y轴最大值
        yAxisMaxValue: 40,
        // y轴最小值
        yAxisMinValue: 0,
        // y轴按几等分
        yAxisDivide: 4,
        // y轴线的颜色
        yAxisColor: '#b9b9b9',
        // x轴线宽度
        yAxisWidth: 0.8,
        // y轴文本颜色
        yAxisTextColor: '#A1A1A1',
        // y轴文本大小
        yAxisTextFont: '13px',

        // x轴线的颜色
        xAxisColor: '#e9e8e8',
        // x轴线宽度
        xAxisWidth: 0.8,
        // x轴文本颜色
        xAxisTextColor: '#A1A1A1',
        // x轴文本大小
        xAxisTextFont: '13px',
        // x轴内左右边距-两边柱状图不靠边
        xAxisPadding: 15,
        // x轴文字顶间距
        xAxisTextTopPadding: 5,

        // 柱图宽度
        columnarWidth: 10,
        // 柱图颜色
        columnarColor:'#802367f4',
        // 柱图的x坐标集合，与下标对应
        columnarXArray:[
            {
                index: 0,
                columnarX: 0
            }
        ],

        // 点击选中的位置
        selectIndex: 0,
        // 点击选中x轴文字颜色
        selectXAxisTextColor:'#000000',
        // 点击选中柱图颜色
        selectColumnarColor: '#2367F4',

        // 数据
        chartData: [
            {
                xData: '3/1',
                yData: 13
            },
            {
                xData: '3/2',
                yData: 20
            },
            {
                xData: '3/3',
                yData: 35
            },
            {
                xData: '3/4',
                yData: 10
            },
            {
                xData: '3/5',
                yData: 8
            },
            {
                xData: '3/6',
                yData: 22
            },
            {
                xData: '3/7',
                yData: 40
            }
        ],
        rect: null,
        ctx: null,
    },
    onInit() {

    },
    onShow() {
        setTimeout(() => {
            this.initCanvas();
        }, 100)
    },
    initCanvas(){
        const element = this.$refs.canvas;
        this.ctx = element.getContext('2d', {
            antialias: true
        });

        // 获取组件大小和位置信息
        this.rect = element.getBoundingClientRect();
        console.log(JSON.stringify(this.rect));
        this.draw();
    },

    // 绘制
    draw() {
        let ctx = this.ctx;
        let rect = this.rect;
        // 清空画布
        ctx.clearRect(0,0,rect.width,rect.height)
        // 测量y轴最大数的文本长度
        const yTextMaxWidth = ctx.measureText('' + this.yAxisMaxValue).width

        // x轴起始坐标
        const xAxisStart = this.paddingLeft
        // x轴结束坐标 = 组件宽度 - 右间距 - y轴文字最大宽度
        const xAxisEnd = rect.width - this.paddingRight - yTextMaxWidth

        // y轴初始坐标
        const yAxisStart = this.paddingTop
        // y轴结束坐标 = 组件高度 - 底间距 - 底部文字高度 - 文字顶间距
        const yAxisEnd = rect.height - this.paddingBottom - 10 - this.xAxisTextTopPadding

        // y轴初始值-画文字
        let yValue = this.yAxisMaxValue
        // y轴平均值-画文字
        let yAverageValue = (this.yAxisMaxValue - this.yAxisMinValue) / this.yAxisDivide

        let yAxis = yAxisStart
        // 画横线、画右边文字
        while (yAxis <= yAxisEnd) {
            // 画线
            ctx.save()
            ctx.strokeStyle = this.xAxisColor
            ctx.beginPath()
            ctx.lineWidth = this.xAxisWidth
            ctx.moveTo(xAxisStart, yAxis)
            ctx.lineTo(xAxisEnd, yAxis)
            ctx.stroke();
            ctx.restore()

            // 画文本
            ctx.save()
            ctx.fillStyle = this.yAxisTextColor
            ctx.font = this.yAxisTextFont
            ctx.textAlign = 'right'
            ctx.fillText('' + yValue, xAxisEnd + yTextMaxWidth, yAxis + 2.5)
            ctx.restore()
            yValue -= yAverageValue

            yAxis += (yAxisEnd - yAxisStart) / this.yAxisDivide
        }


        // 画x轴的实际宽度，两边柱状图不靠边
        const xDrawWidth = xAxisEnd - xAxisStart - this.xAxisPadding * 2
        // 起始点
        let xAxis = this.paddingLeft + this.xAxisPadding
        // x轴平均值
        let xAverageWidth = (xDrawWidth) / (this.chartData.length - 1)

        this.columnarXArray = []

        // 画x轴上的文字和数据
        for (let i = 0; i < this.chartData.length; i++) {
            const item = this.chartData[i]
            const columnarX = {
                index: i, columnarX: xAxis
            }
            this.columnarXArray.push(columnarX)

            // 画文本
            ctx.save()
            ctx.fillStyle = this.selectIndex === i ? this.selectXAxisTextColor : this.xAxisTextColor
            ctx.font = this.xAxisTextFont
            ctx.textAlign = 'center'
            ctx.fillText(item.xData, xAxis, rect.height - this.paddingBottom)
            ctx.restore()

            if(this.selectIndex === i){
                // 画线
                ctx.save()
                ctx.strokeStyle = this.yAxisColor
                ctx.lineCap = 'butt'
                ctx.lineWidth = this.yAxisWidth
                ctx.beginPath()
                ctx.moveTo(xAxis, yAxisEnd - this.xAxisWidth)
                ctx.lineTo(xAxis, this.paddingTop)
                ctx.stroke();
                ctx.restore()
            }

            // 画柱图
            ctx.save()
            ctx.beginPath()
            ctx.lineWidth = 0.1
            ctx.moveTo(xAxis - this.columnarWidth / 2, yAxisEnd - this.xAxisWidth)
            // 根据数据比例得出画的高度
            const yDrawHeight = (yAxisEnd - yAxisStart) * item.yData / this.yAxisMaxValue
            // 从y轴结束开始画，值结束的坐标：yAxisValueEnd 为了显示圆角：+ 柱图宽度/2（圆的半径）
            const yAxisValueEnd = yAxisEnd - yDrawHeight + this.xAxisWidth + this.columnarWidth / 2
            ctx.lineTo(xAxis - this.columnarWidth / 2, yAxisValueEnd)
            // 画圆角
            ctx.arc(xAxis, yAxisValueEnd, this.columnarWidth / 2, 3.14, 0)
            ctx.lineTo(xAxis + this.columnarWidth / 2, yAxisEnd - this.xAxisWidth)
            ctx.stroke()
            ctx.fillStyle = this.selectIndex === i ? this.selectColumnarColor : this.columnarColor
            ctx.fill()
            ctx.restore()

            xAxis += xAverageWidth
            lg.timeEnd('settimer')
        }
    },

    // 触摸按下
    onTouchStart(event) {
        lg.time('settimer')

        console.log(event.touches[0].localX)
        // 点击x坐标，相对于组件
        const clickX = event.touches[0].localX
        let lastSelectIndex = this.selectIndex
        for (let i = 0; i < this.columnarXArray.length; i++) {
            let item = this.columnarXArray[i]
            if (Math.abs(item.columnarX - clickX) <= this.columnarWidth + 5) {
                this.selectIndex = item.index
                break
            }
        }
        if (this.selectIndex !== lastSelectIndex) {
            this.draw()
        }
    }
}
